<template>
  <div class="flow-add">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>新增工艺流程</h2>
      <p>创建新的工艺流程信息</p>
    </div>

    <!-- 基础信息部分 -->
    <el-card class="form-card" shadow="never">
      <div class="section-title">
        <h3>基础信息</h3>
      </div>
      
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工艺流程编号" prop="ProcessflowCode">
              <el-input 
                v-model="formData.ProcessflowCode" 
                placeholder="工艺流程编号"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工艺流程名称" prop="ProcessflowName">
              <el-input 
                v-model="formData.ProcessflowName" 
                placeholder="请输入工艺流程名称"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="工序" prop="ProcessId">
              <el-select 
                v-model="formData.ProcessId" 
                placeholder="请选择工序" 
                style="width: 100%"
                filterable
                @change="handleSelectChange"
              >
                <el-option
                  v-for="process in processList"
                  :key="process.id"
                  :label="`${process.processCode} - ${process.processName}`"
                  :value="process.id"
                />
              </el-select>
              <div class="form-tip">从工序列表中选择或在下拉框中选择</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 工序选择列表 -->
    <div class="process-list-section">
      <div class="section-header">
        <h3>工序管理列表</h3>
        <el-button type="primary" @click="handleAddProcess" :icon="Plus">
          新增工序
        </el-button>
      </div>
      
      <el-table 
        :data="processList" 
        stripe 
        border 
        style="width: 100%"
        max-height="400"
        @row-click="handleProcessSelect"
        :row-key="(row: any) => row.uniqueId || row.id"
      >
        <el-table-column prop="originalId" label="ID" width="80">
          <template #default="{ row }">
            <span :title="`原始ID: ${row.originalId}，唯一标识: ${row.uniqueId}`">
              {{ row.originalId }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="processCode" label="工序编码" width="150" />
        <el-table-column prop="processName" label="工序名称" width="200" />
        <el-table-column prop="user" label="负责人" width="100" />
        <el-table-column prop="deptName" label="部门" width="120" />
        <el-table-column prop="state" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.state === 1 ? 'success' : 'danger'">
              {{ row.state === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="selectProcess(row)">
                选择
              </el-button>
              <el-button type="success" size="small" @click="handleEditProcess(row)">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑工序对话框 -->
    <el-dialog
      v-model="editProcessDialogVisible"
      title="编辑工序"
      width="600px"
      :before-close="handleEditProcessDialogClose"
    >
      <el-form
        ref="editProcessFormRef"
        :model="editProcessData"
        :rules="editProcessRules"
        label-width="120px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工序编码" prop="ProcessCode">
              <el-input 
                v-model="editProcessData.ProcessCode" 
                placeholder="工序编码"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工序名称" prop="ProcessName">
              <el-input 
                v-model="editProcessData.ProcessName" 
                placeholder="请输入工序名称"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工序类型" prop="ProcessTypeId">
              <el-select 
                v-model="editProcessData.ProcessTypeId" 
                placeholder="请选择工序类型" 
                style="width: 100%"
              >
                <el-option
                  v-for="type in processTypes"
                  :key="type.id"
                  :label="`${type.processTypeCode} - ${type.processTypeName}`"
                  :value="type.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="User">
              <el-input 
                v-model="editProcessData.User" 
                placeholder="请输入负责人"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属部门" prop="DeptName">
              <el-input 
                v-model="editProcessData.DeptName" 
                placeholder="请输入所属部门"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="State">
              <el-radio-group v-model="editProcessData.State">
                <el-radio :value="1">启用</el-radio>
                <el-radio :value="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工序数量" prop="ProcessCount">
              <el-input-number 
                v-model="editProcessData.ProcessCount" 
                :min="1"
                :max="999"
                placeholder="工序数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="Desc">
              <el-input 
                v-model="editProcessData.Desc" 
                placeholder="请输入描述"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleEditProcessDialogClose">取消</el-button>
          <el-button type="primary" @click="handleEditProcessSubmit" :loading="editProcessLoading">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增工序对话框 -->
    <el-dialog
      v-model="addProcessDialogVisible"
      title="新增工序"
      width="600px"
      :before-close="handleAddProcessDialogClose"
    >
      <el-form
        ref="addProcessFormRef"
        :model="newProcessData"
        :rules="addProcessRules"
        label-width="120px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工序编码" prop="ProcessCode">
              <el-input 
                v-model="newProcessData.ProcessCode" 
                placeholder="工序编码"
                :disabled="true"
              />
              <div class="form-tip">编码将自动生成</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工序名称" prop="ProcessName">
              <el-input 
                v-model="newProcessData.ProcessName" 
                placeholder="请输入工序名称"
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工序类型" prop="ProcessTypeId">
              <el-select 
                v-model="newProcessData.ProcessTypeId" 
                placeholder="请选择工序类型" 
                style="width: 100%"
              >
                <el-option
                  v-for="type in processTypes"
                  :key="type.id"
                  :label="`${type.processTypeCode} - ${type.processTypeName}`"
                  :value="type.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="User">
              <el-input 
                v-model="newProcessData.User" 
                placeholder="请输入负责人"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属部门" prop="DeptName">
              <el-input 
                v-model="newProcessData.DeptName" 
                placeholder="请输入所属部门"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="State">
              <el-radio-group v-model="newProcessData.State">
                <el-radio :value="1">启用</el-radio>
                <el-radio :value="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工序数量" prop="ProcessCount">
              <el-input-number 
                v-model="newProcessData.ProcessCount" 
                :min="1"
                :max="999"
                placeholder="工序数量"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="Desc">
              <el-input 
                v-model="newProcessData.Desc" 
                placeholder="请输入描述"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleAddProcessDialogClose">取消</el-button>
          <el-button type="primary" @click="handleAddProcessSubmit" :loading="addProcessLoading">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 操作按钮 -->
    <div class="form-actions">
      <el-button @click="handleCancel" size="large">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitLoading" size="large">
        <el-icon><Check /></el-icon>
        保存
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Check, Close, Plus, Edit } from '@element-plus/icons-vue'
import { getReadClient, getWriteClient } from '@/Urls/AxiosHelper'
import { useRouter } from 'vue-router'

// 使用正确的客户端
const r3 = getReadClient(0) // 使用相对路径，通过Vite代理到localhost:5154
const w8 = getWriteClient(0) // 使用相对路径，通过Vite代理到localhost:5070

// 路由
const router = useRouter()

// 接口类型定义
interface Process {
  id: number
  processCode: string
  processName: string
  processTypeId: number
  user: string
  deptName: string
  state: number
  processCount: number
  desc: string
  isDelete: boolean
  originalId?: number
  uniqueId?: string
}

interface ProcessFlowFormData {
  ProcessflowCode: string
  ProcessflowName: string
  ProcessId: number | null
}

interface NewProcessData {
  ProcessCode: string
  ProcessName: string
  ProcessTypeId: number | null
  User: string
  DeptName: string
  State: number
  ProcessCount: number
  Desc: string
}

interface ProcessType {
  id: number
  processTypeCode: string
  processTypeName: string
  processTypeState: number
  isDelete: boolean
}

// 响应式数据
const submitLoading = ref(false)
const formRef = ref()
const selectedProcessId = ref<number | null>(null)
const addProcessDialogVisible = ref(false)
const addProcessLoading = ref(false)
const addProcessFormRef = ref()

// 编辑工序相关
const editProcessDialogVisible = ref(false)
const editProcessLoading = ref(false)
const editProcessFormRef = ref()
const currentEditProcess = ref<Process | null>(null)

// 工序列表数据
const processList = ref<Process[]>([])
const processTypes = ref<ProcessType[]>([])

// 表单数据
const formData = reactive<ProcessFlowFormData>({
  ProcessflowCode: '',
  ProcessflowName: '',
  ProcessId: null
})

// 新增工序表单数据
const newProcessData = reactive<NewProcessData>({
  ProcessCode: '',
  ProcessName: '',
  ProcessTypeId: null,
  User: '',
  DeptName: '',
  State: 1,
  ProcessCount: 1,
  Desc: ''
})

// 编辑工序表单数据
const editProcessData = reactive<NewProcessData>({
  ProcessCode: '',
  ProcessName: '',
  ProcessTypeId: null,
  User: '',
  DeptName: '',
  State: 1,
  ProcessCount: 1,
  Desc: ''
})

// 表单验证规则
const formRules = {
  ProcessflowName: [
    { required: true, message: '请输入工艺流程名称', trigger: 'blur' },
    { min: 2, max: 100, message: '工艺流程名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  ProcessId: [
    { required: true, message: '请选择关联工序', trigger: 'change' }
  ]
}

// 新增工序表单验证规则
const addProcessRules = {
  ProcessName: [
    { required: true, message: '请输入工序名称', trigger: 'blur' },
    { min: 2, max: 100, message: '工序名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  ProcessTypeId: [
    { required: true, message: '请选择工序类型', trigger: 'change' }
  ],
  User: [
    { required: true, message: '请输入负责人', trigger: 'blur' }
  ],
  DeptName: [
    { required: true, message: '请输入所属部门', trigger: 'blur' }
  ]
}

// 编辑工序表单验证规则
const editProcessRules = {
  ProcessName: [
    { required: true, message: '请输入工序名称', trigger: 'blur' },
    { min: 2, max: 100, message: '工序名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  ProcessTypeId: [
    { required: true, message: '请选择工序类型', trigger: 'change' }
  ],
  User: [
    { required: true, message: '请输入负责人', trigger: 'blur' }
  ],
  DeptName: [
    { required: true, message: '请输入所属部门', trigger: 'blur' }
  ]
}

// 生成工艺流程编码
const generateProcessFlowCode = async () => {
  try {
    // 获取所有工艺流程数据来确保编码唯一性
    const response = await r3.get('/sellreadapi/api/Processs/Processflowlist', {
      params: { pageindex: 1, pagesize: 1000 }
    })
    
    let maxCode = 4 // 从CF-005开始，所以基础编号是4
    if (response.data && response.data.data && response.data.data.data.length > 0) {
      // 从现有数据中提取最大编码
      const existingCodes = response.data.data.data.map((item: any) => {
        const match = item.processflowCode.match(/CF-(\d+)/)
        return match ? parseInt(match[1]) : 0
      })
      maxCode = Math.max(...existingCodes)
    }
    
    // 生成新编码，确保从CF-005开始
    const newCode = `CF-${String(maxCode + 1).padStart(3, '0')}`
    formData.ProcessflowCode = newCode
  } catch (error: any) {
    console.error('生成工艺流程编码失败:', error)
    // 如果出错，默认生成CF-005
    formData.ProcessflowCode = 'CF-005'
  }
}

// 获取工序列表
const fetchProcessList = async () => {
  try {
    const response = await r3.get('/sellreadapi/api/Processs/Processslist', {
      params: { pageindex: 1, pagesize: 1000 }
    })
    
    console.log('工序列表API响应:', response.data)
    
    if (response.data.code === 200) {
      const rawData = response.data.data.data
      console.log('原始工序数据:', rawData)
      
      // 检查ID重复问题并生成唯一标识
      const idCounts: { [key: number]: number } = {}
      const processedData = rawData.map((item: any, index: number) => {
        // 检查ID是否重复
        if (idCounts[item.id]) {
          console.warn(`发现重复ID: ${item.id}，位置: ${index}，工序名称: ${item.processName}`)
          // 为重复ID生成唯一标识
          return {
            ...item,
            uniqueId: `${item.id}-${index}-${Date.now()}`, // 添加时间戳确保唯一性
            originalId: item.id // 保留原始ID
          }
        } else {
          idCounts[item.id] = 1
          return {
            ...item,
            uniqueId: `${item.id}-${index}`, // 添加唯一标识
            originalId: item.id // 保留原始ID
          }
        }
      })
      
      console.log('处理后的工序数据:', processedData)
      processList.value = processedData
    }
  } catch (error) {
    console.log('获取工序列表失败:', error)
    ElMessage.error('获取工序列表失败')
  }
}

// 获取工序分类列表
const fetchProcessTypes = async () => {
  try {
    const response = await r3.get('/sellreadapi/api/Processs/processtypelist', {
      params: { pageindex: 1, pagesize: 1000 }
    })
    
    if (response.data.code === 200) {
      processTypes.value = response.data.data.data
    }
  } catch (error) {
    console.log('获取工序分类列表失败:', error)
    ElMessage.error('获取工序分类列表失败')
  }
}

// 选择工序
const selectProcess = (process: Process) => {
  // 使用原始ID进行选择
  const processId = process.originalId || process.id
  
  // 防止重复选择同一个工序
  if (selectedProcessId.value === processId) {
    return
  }
  
  formData.ProcessId = processId
  selectedProcessId.value = processId
  ElMessage.success(`已选择工序: ${process.processCode} - ${process.processName}`)
}

// 处理工序行点击
const handleProcessSelect = (row: Process) => {
  selectProcess(row)
}

// 处理下拉框选择变化
const handleSelectChange = (processId: number) => {
  // 防止重复选择同一个工序
  if (selectedProcessId.value === processId) {
    return
  }
  
  selectedProcessId.value = processId
  const selectedProcess = processList.value.find(p => p.id === processId)
  if (selectedProcess) {
    ElMessage.success(`已选择工序: ${selectedProcess.processCode} - ${selectedProcess.processName}`)
  }
}

// 生成工序编码
const generateProcessCode = async () => {
  try {
    const response = await r3.get('/sellreadapi/api/Processs/Processslist', {
      params: { pageindex: 1, pagesize: 1000 }
    })
    
    let maxCode = 0
    if (response.data && response.data.data && response.data.data.data.length > 0) {
      const existingCodes = response.data.data.data.map((item: Process) => {
        const match = item.processCode.match(/GJ-(\d+)/)
        return match ? parseInt(match[1]) : 0
      })
      maxCode = Math.max(...existingCodes)
    }
    
    const newCode = `GJ-${String(maxCode + 1).padStart(3, '0')}`
    newProcessData.ProcessCode = newCode
  } catch (error: any) {
    console.error('生成工序编码失败:', error)
    newProcessData.ProcessCode = 'GJ-001'
  }
}

// 打开新增工序对话框
const handleAddProcess = async () => {
  resetAddProcessForm()
  await generateProcessCode()
  addProcessDialogVisible.value = true
}

// 重置新增工序表单
const resetAddProcessForm = () => {
  newProcessData.ProcessCode = ''
  newProcessData.ProcessName = ''
  newProcessData.ProcessTypeId = null
  newProcessData.User = ''
  newProcessData.DeptName = ''
  newProcessData.State = 1
  newProcessData.ProcessCount = 1
  newProcessData.Desc = ''
  
  if (addProcessFormRef.value) {
    addProcessFormRef.value.clearValidate()
  }
}

// 关闭新增工序对话框
const handleAddProcessDialogClose = () => {
  addProcessDialogVisible.value = false
  resetAddProcessForm()
}

// 提交新增工序
const handleAddProcessSubmit = async () => {
  if (!addProcessFormRef.value) return
  
  try {
    await addProcessFormRef.value.validate()
    addProcessLoading.value = true
    
    const response = await w8.post('/sellwriteapi/api/Pro/ProAdd', newProcessData)
    
    if (response.data.Code === 200) {
      ElMessage.success('工序添加成功')
      addProcessDialogVisible.value = false
      resetAddProcessForm()
      // 刷新工序列表
      await fetchProcessList()
    } else {
      ElMessage.error(response.data.Message || '添加失败')
    }
  } catch (error: any) {
    console.error('添加工序失败:', error)
    ElMessage.error('添加工序失败，请重试')
  } finally {
    addProcessLoading.value = false
  }
}

// 编辑工序
const handleEditProcess = (row: Process) => {
  console.log('编辑工序，行数据:', row)
  console.log('原始ID:', row.originalId)
  console.log('当前ID:', row.id)
  
  currentEditProcess.value = row
  editProcessData.ProcessCode = row.processCode
  editProcessData.ProcessName = row.processName
  editProcessData.ProcessTypeId = row.processTypeId
  editProcessData.User = row.user
  editProcessData.DeptName = row.deptName
  editProcessData.State = row.state
  editProcessData.ProcessCount = row.processCount
  editProcessData.Desc = row.desc
  editProcessDialogVisible.value = true
}

// 关闭编辑工序对话框
const handleEditProcessDialogClose = () => {
  editProcessDialogVisible.value = false
  currentEditProcess.value = null
  resetEditProcessForm()
}

// 重置编辑工序表单
const resetEditProcessForm = () => {
  editProcessData.ProcessCode = ''
  editProcessData.ProcessName = ''
  editProcessData.ProcessTypeId = null
  editProcessData.User = ''
  editProcessData.DeptName = ''
  editProcessData.State = 1
  editProcessData.ProcessCount = 1
  editProcessData.Desc = ''
  
  if (editProcessFormRef.value) {
    editProcessFormRef.value.clearValidate()
  }
}

// 提交编辑工序
const handleEditProcessSubmit = async () => {
  if (!editProcessFormRef.value || !currentEditProcess.value) return
  
  try {
    await editProcessFormRef.value.validate()
    editProcessLoading.value = true
    
    // 构建编辑数据，使用原始ID
    const editData = {
      Id: currentEditProcess.value.originalId || currentEditProcess.value.id,
      ...editProcessData
    }
    
    console.log('提交编辑数据:', editData)
    
    const response = await w8.post('/sellwriteapi/api/Pro/ProUpdate', editData)
    
    console.log('编辑响应:', response.data)
    
    if (response.data.Code === 200) {
      ElMessage.success('工序修改成功')
      editProcessDialogVisible.value = false
      resetEditProcessForm()
      // 刷新工序列表
      await fetchProcessList()
    } else {
      ElMessage.error(response.data.Message || '修改失败')
    }
  } catch (error: any) {
    console.error('修改工序失败:', error)
    console.error('错误详情:', error.response?.data)
    
    let errorMessage = '修改工序失败'
    if (error.response?.status === 500) {
      errorMessage += ': 服务器内部错误，请检查后端服务'
    } else if (error.response?.status === 400) {
      errorMessage += ': 请求参数错误'
    } else if (error.response?.data?.Message) {
      errorMessage += `: ${error.response.data.Message}`
    }
    
    ElMessage.error(errorMessage)
  } finally {
    editProcessLoading.value = false
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    // 新增模式 - 只提交API需要的字段
    const response = await w8.post('/sellwriteapi/api/Pro/FlowAdd', formData)
    
    if (response.data.Code === 200) {
      ElMessage.success('工艺流程添加成功')
      router.push('/proflowlist')
    } else {
      ElMessage.error(response.data.Message || '添加失败')
    }
  } catch (error: any) {
    console.error('操作失败:', error)
    
    let errorMessage = '添加失败: '
    
    if (error.response) {
      const status = error.response.status
      const data = error.response.data
      
      if (status === 400) {
        errorMessage += '请求参数错误'
        if (data && data.errors) {
          errorMessage += `: ${JSON.stringify(data.errors)}`
        }
      } else if (status === 500) {
        errorMessage += '服务器内部错误'
        if (data && data.includes('Duplicate entry')) {
          errorMessage += ': 工艺流程编码已存在'
        }
      } else {
        errorMessage += `服务器错误 (${status}): ${data || error.message}`
      }
    } else if (error.request) {
      errorMessage += '网络错误，请检查网络连接'
    } else {
      errorMessage += error.message || '未知错误'
    }
    
    ElMessage.error(errorMessage)
  } finally {
    submitLoading.value = false
  }
}

// 取消操作
const handleCancel = () => {
  router.push('/proflowlist')
}

// 组件挂载时获取数据
onMounted(async () => {
  console.log('FlowAdd组件挂载，开始获取数据...')
  await fetchProcessTypes()
  await fetchProcessList()
  await generateProcessFlowCode()
})
</script>

<style scoped>
.flow-add {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.form-card {
  max-width: 1200px;
  margin: 0 auto 20px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #409eff;
}

.section-title h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.section-actions {
  display: flex;
  gap: 12px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #ebeef5;
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-input__inner) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-select .el-input__inner) {
  border-radius: 6px;
}

:deep(.el-textarea__inner) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-textarea__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-checkbox) {
  margin-right: 0;
}

:deep(.el-checkbox__label) {
  font-weight: 500;
  color: #606266;
}

/* 卡片样式 */
:deep(.el-card) {
  border-radius: 12px;
  border: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 32px;
}

/* 按钮样式 */
.form-actions .el-button {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.form-actions .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.form-actions .el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
}

.form-actions .el-button:not(.el-button--primary) {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.form-actions .el-button:not(.el-button--primary):hover {
  background: #ecf5ff;
  border-color: #b3d8ff;
  color: #409eff;
  transform: translateY(-2px);
}

/* 禁用输入框样式 */
:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

:deep(.el-input.is-disabled .el-input__inner:focus) {
  border-color: #e4e7ed;
  box-shadow: none;
}

/* 工序列表表格样式 */
:deep(.el-table) {
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  font-size: 13px;
}

:deep(.el-table td) {
  padding: 12px 0;
  font-size: 13px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 8px;
  transition: all 0.2s ease;
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
}

.action-buttons .el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.action-buttons .el-button--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
}

.action-buttons .el-button--success:hover {
  background: linear-gradient(135deg, #85ce61 0%, #67c23a 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
}

.action-buttons .el-button--danger {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
}

.action-buttons .el-button--danger:hover {
  background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(245, 108, 108, 0.3);
}

/* 工序列表行悬停效果 */
:deep(.el-table tbody tr:hover) {
  background-color: #f0f9ff;
  cursor: pointer;
}

/* 对话框样式 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  border-bottom: 1px solid #e4e7ed;
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
  font-size: 18px;
}

:deep(.el-dialog__body) {
  padding: 24px;
  background-color: #fafbfc;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  background-color: #f5f7fa;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.dialog-footer .el-button) {
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.dialog-footer .el-button--primary) {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

:deep(.dialog-footer .el-button--primary:hover) {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
}
</style>